.collector-animation {
  position: relative;
  width: 450px;
  height: 150px;
  margin-bottom: 10px;
  overflow: hidden;
  background: url(../img/collector-search.svg) 0 0;
}

.collector {
  position: absolute;
  background: url(../img/rt-probe.svg) 0 0;
  background-size: cover;
  -webkit-animation-duration: 13s;
  animation-duration: 13s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}


/* COLLECTOR ONE
========================================================================== */

.collector-1 {
  top: 110%;
  width: 61px;
  height: 64px;
  -webkit-animation-name: collector-one;
  animation-name: collector-one;
  -webkit-transform: translate3d(490px, -75px, 0) rotate(24deg);
  transform: translate3d(490px, -75px, 0) rotate(24deg);
}

@-webkit-keyframes collector-one {
  60% {
    -webkit-transform: translate3d(490px, -75px, 0) rotate(24deg);
    transform: translate3d(490px, -75px, 0) rotate(24deg);
  }

  75% {
    -webkit-transform: translate3d(200px, -250px, 0) rotate(4deg);
    transform: translate3d(200px, -250px, 0) rotate(4deg);
  }

  100% {
    -webkit-transform: translate3d(200px, -250px, 0) rotate(4deg);
    transform: translate3d(200px, -250px, 0) rotate(4deg);
  }
}

@keyframes collector-one {
  60% {
    -webkit-transform: translate3d(490px, -75px, 0) rotate(24deg);
    transform: translate3d(490px, -75px, 0) rotate(24deg);
  }

  75% {
    -webkit-transform: translate3d(200px, -250px, 0) rotate(4deg);
    transform: translate3d(200px, -250px, 0) rotate(4deg);
  }

  100% {
    -webkit-transform: translate3d(200px, -250px, 0) rotate(4deg);
    transform: translate3d(200px, -250px, 0) rotate(4deg);
  }
}


/* COLLECTOR TWO
========================================================================== */

.collector-2 {
  top: 110%;
  width: 45px;
  height: 48px;
  -webkit-animation-name: collector-two;
  animation-name: collector-two;
  -webkit-transform: translate3d(490px, -100px, 0) rotate(36deg);
  transform: translate3d(490px, -100px, 0) rotate(36deg);
}

@-webkit-keyframes collector-two {
  75% {
    -webkit-transform: translate3d(490px, -100px, 0) rotate(36deg);
    transform: translate3d(490px, -100px, 0) rotate(36deg);
  }

  88% {
    -webkit-transform: translate3d(150px, -250px, 0) rotate(46deg);
    transform: translate3d(150px, -250px, 0) rotate(46deg);
  }

  100% {
    -webkit-transform: translate3d(150px, -250px, 0) rotate(46deg);
    transform: translate3d(150px, -250px, 0) rotate(46deg);
  }
}

@keyframes collector-two {
  75% {
    -webkit-transform: translate3d(490px, -100px, 0) rotate(36deg);
    transform: translate3d(490px, -100px, 0) rotate(36deg);
  }

  88% {
    -webkit-transform: translate3d(150px, -250px, 0) rotate(46deg);
    transform: translate3d(150px, -250px, 0) rotate(46deg);
  }

  100% {
    -webkit-transform: translate3d(150px, -250px, 0) rotate(46deg);
    transform: translate3d(150px, -250px, 0) rotate(46deg);
  }
}


/* COLLECTOR THREE
========================================================================== */

.collector-3 {
  top: 110%;
  width: 20px;
  height: 22px;
  -webkit-animation-name: collector-three;
  animation-name: collector-three;
  -webkit-transform: translate3d(490px, -50px, 0) rotate(48deg);
  transform: translate3d(490px, -50px, 0) rotate(48deg);
}

@-webkit-keyframes collector-three {
  5% {
    -webkit-transform: translate3d(490px, -50px, 0) rotate(48deg);
    transform: translate3d(490px, -50px, 0) rotate(48deg);
  }

  20% {
    -webkit-transform: translate3d(150px, -210px, 0) rotate(-90deg);
    transform: translate3d(150px, -210px, 0) rotate(-90deg);
  }

  100% {
    -webkit-transform: translate3d(150px, -210px, 0) rotate(-90deg);
    transform: translate3d(150px, -210px, 0) rotate(-90deg);
  }
}

@keyframes collector-three {
  5% {
    -webkit-transform: translate3d(490px, -50px, 0) rotate(48deg);
    transform: translate3d(490px, -50px, 0) rotate(48deg);
  }

  20% {
    -webkit-transform: translate3d(150px, -210px, 0) rotate(-90deg);
    transform: translate3d(150px, -210px, 0) rotate(-90deg);
  }

  100% {
    -webkit-transform: translate3d(150px, -210px, 0) rotate(-90deg);
    transform: translate3d(150px, -210px, 0) rotate(-90deg);
  }
}


/* COLLECTOR FOUR
========================================================================== */

.collector-4 {
  top: 110%;
  width: 20px;
  height: 22px;
  -webkit-animation-name: collector-four;
  animation-name: collector-four;
  -webkit-transform: translate3d(490px, -50px, 0) rotate(48deg);
  transform: translate3d(490px, -50px, 0) rotate(48deg);
}

@-webkit-keyframes collector-four {
  40% {
    -webkit-transform: translate3d(490px, -50px, 0) rotate(48deg);
    transform: translate3d(490px, -50px, 0) rotate(48deg);
  }

  55% {
    -webkit-transform: translate3d(150px, -210px, 0) rotate(-90deg);
    transform: translate3d(150px, -210px, 0) rotate(-90deg);
  }

  100% {
    -webkit-transform: translate3d(150px, -210px, 0) rotate(-90deg);
    transform: translate3d(150px, -210px, 0) rotate(-90deg);
  }
}

@keyframes collector-four {
  40% {
    -webkit-transform: translate3d(490px, -50px, 0) rotate(48deg);
    transform: translate3d(490px, -50px, 0) rotate(48deg);
  }

  55% {
    -webkit-transform: translate3d(150px, -210px, 0) rotate(-90deg);
    transform: translate3d(150px, -210px, 0) rotate(-90deg);
  }

  100% {
    -webkit-transform: translate3d(150px, -210px, 0) rotate(-90deg);
    transform: translate3d(150px, -210px, 0) rotate(-90deg);
  }
}


/* COLLECTOR FIVE
========================================================================== */

.collector-5 {
  top: 110%;
  width: 40px;
  height: 43px;
  -webkit-animation-name: collector-five;
  animation-name: collector-five;
  -webkit-transform: translate3d(490px, -75px, 0) rotate(48deg);
  transform: translate3d(490px, -75px, 0) rotate(48deg);
}

@-webkit-keyframes collector-five {
  28% {
    -webkit-transform: translate3d(490px, -75px, 0) rotate(48deg);
    transform: translate3d(490px, -75px, 0) rotate(48deg);
  }

  40% {
    -webkit-transform: translate3d(125px, -210px, 0) rotate(-90deg);
    transform: translate3d(125px, -210px, 0) rotate(-90deg);
  }

  100% {
    -webkit-transform: translate3d(125px, -210px, 0) rotate(-90deg);
    transform: translate3d(125px, -210px, 0) rotate(-90deg);
  }
}

@keyframes collector-five {
  28% {
    -webkit-transform: translate3d(490px, -75px, 0) rotate(48deg);
    transform: translate3d(490px, -75px, 0) rotate(48deg);
  }

  40% {
    -webkit-transform: translate3d(125px, -210px, 0) rotate(-90deg);
    transform: translate3d(125px, -210px, 0) rotate(-90deg);
  }

  100% {
    -webkit-transform: translate3d(125px, -210px, 0) rotate(-90deg);
    transform: translate3d(125px, -210px, 0) rotate(-90deg);
  }
}


.ascii-ellipses-layout {
  opacity: 0;
  position: absolute;
  margin-left: 265px;
  margin-right: auto;
  margin-top: 0px;
  left: 0;
  right: 0;
  color: $text-color;
  font-weight: 600;
}

.ascii-ellipses-container {
  position: relative;
  display: inline-block;
}

.ascii-ellipses-1 {
  @extend .ascii-ellipses-layout;
  animation: loading-1 3250ms ease-in infinite;
  -webkit-animation: loading-1 3250ms ease-in infinite;
  -moz-animation: loading-1 3250ms ease-in infinite;
  -o-animation: loading-1 3250ms ease-in infinite;
}

.ascii-ellipses-2 {
  @extend .ascii-ellipses-layout;
  -webkit-animation: loading-2 3250ms ease-in infinite;
  -moz-animation: loading-2 3250ms ease-in infinite;
  -o-animation: loading-2 3250ms ease-in infinite;
  animation: loading-2 3250ms ease-in infinite;
}

.ascii-ellipses-3 {
  @extend .ascii-ellipses-layout;
  -webkit-animation: loading-3 3250ms ease-in infinite;
  -moz-animation: loading-3 3250ms ease-in infinite;
  -o-animation: loading-3 3250ms ease-in infinite;
  animation: loading-3 3250ms ease-in infinite;
}

.ascii-ellipses-4 {
  @extend .ascii-ellipses-layout;
  -webkit-animation: loading-4 3250ms ease-in infinite;
  -moz-animation: loading-4 3250ms ease-in infinite;
  -o-animation: loading-4 3250ms ease-in infinite;
  animation: loading-4 3250ms ease-in infinite;
}

@-webkit-keyframes loading-1 {
  0% {
    opacity: 0;
  }
  1% {
    opacity: .75;
  }
  11% {
    opacity: .75;
  }
  12% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes loading-1 {
  0% {
    opacity: 0;
  }
  1% {
    opacity: .75;
  }
  11% {
    opacity: .75;
  }
  12% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes loading-1 {
  0% {
    opacity: 0;
  }
  1% {
    opacity: .75;
  }
  11% {
    opacity: .75;
  }
  12% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes loading-1 {
  0% {
    opacity: 0;
  }
  1% {
    opacity: .75;
  }
  11% {
    opacity: .75;
  }
  12% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes loading-2 {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  11% {
    opacity: .75;
  }
  22% {
    opacity: .75;
  }
  23% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes loading-2 {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  11% {
    opacity: .75;
  }
  22% {
    opacity: .75;
  }
  23% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes loading-2 {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  11% {
    opacity: .75;
  }
  22% {
    opacity: .75;
  }
  23% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes loading-2 {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  11% {
    opacity: .75;
  }
  22% {
    opacity: .75;
  }
  23% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes loading-3 {
  0% {
    opacity: 0;
  }
  21% {
    opacity: 0;
  }
  22% {
    opacity: .75;
  }
  33% {
    opacity: .75;
  }
  34% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes loading-3 {
  0% {
    opacity: 0;
  }
  21% {
    opacity: 0;
  }
  22% {
    opacity: .75;
  }
  33% {
    opacity: .75;
  }
  34% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes loading-3 {
  0% {
    opacity: 0;
  }
  21% {
    opacity: 0;
  }
  22% {
    opacity: .75;
  }
  33% {
    opacity: .75;
  }
  34% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes loading-3 {
  0% {
    opacity: 0;
  }
  21% {
    opacity: 0;
  }
  22% {
    opacity: .75;
  }
  33% {
    opacity: .75;
  }
  34% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes loading-4 {
  0% {
    opacity: 0;
  }
  34% {
    opacity: 0;
  }
  35% {
    opacity: .75;
  }
  46% {
    opacity: .75;
  }
  47% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes loading-4 {
  0% {
    opacity: 0;
  }
  34% {
    opacity: 0;
  }
  35% {
    opacity: .75;
  }
  46% {
    opacity: .75;
  }
  47% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes loading-4 {
  0% {
    opacity: 0;
  }
  34% {
    opacity: 0;
  }
  35% {
    opacity: .75;
  }
  46% {
    opacity: .75;
  }
  47% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes loading-4 {
  0% {
    opacity: 0;
  }
  34% {
    opacity: 0;
  }
  35% {
    opacity: .75;
  }
  46% {
    opacity: .75;
  }
  47% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

// Code samples
// ==========================================================================

.rt-collector-config pre {
  margin: 0.25em 0;
  padding: 10px;
  background-color: $input-bg;
  border-radius: 3px;
  line-height: normal;
}

.rt-collector-config pre .h {
  color: $rt-blue;
}

.rt-collector-config code {
  background: transparent;
}
